<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>角色管理</title>
    <link rel="stylesheet" href="/leek_bbs/statics/yu-ui/js_css/yu.css">
    <link rel="stylesheet" href="/leek_bbs/statics/layui/css/layui.css">
    <style>

        a { color:blue; transition:0.5s; }
        a:hover { color:red; }
        .layui-layout-admin .layui-footer{
            left: 0px;
            width: 98%;
        }
    </style>

</head>
<body style="background-color: #F2F2F2">

<div class="layui-layout layui-layout-admin" id="hmc">

    <div style="background-color: #FFFFFF">
        <!-- 内容主体区域 -->
        <div class="layui-tab layui-tab-brief" lay-filter="demo" lay-allowClose="true" >
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <form class="layui-form">
                        <div class="layui-form-item marg" style="margin-left: 20px">
                            <div class="layui-inline">
                                <div class="layui-input-inline">
                                    <input type="text" id="role_desc" name="role_desc" placeholder="角色描述..." autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <div class="layui-input-inline">
                                    <button type="button" lay-submit lay-filter="searchBtn" class="layui-btn layui-btn-warm layui-icon layui-icon-search">查询</button>
                                </div>
                            </div>
                        </div>
                    </form>

                    <table class="layui-hide" id="userRoleTable" lay-filter="test"></table>

                    <!-- 自定义按钮 -->
                    <div style="display: none;" id="cellphoneToo">
                        <div class="layui-btn-group">
                            <button type="button" class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe654;</i>增加</button>
                            <button type="button" class="layui-btn layui-btn-sm" lay-event="batchDelete"><i class="layui-icon">&#xe640;</i>批量删除</button>
                        </div>
                    </div>

                    <!-- 自定义操作按钮 -->
                    <div id="cellphoneBar" >
                        <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
                        <a style="margin-left: 2px;" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        <div align="center">
            © 凛冬 - 版权所有
        </div>
    </div>
</div>
<script src="/leek_bbs/statics/component/common_import.js"></script>
<script>
    let tableLoad;
    let roles;

    layui.use(['table','form','element','layer'], function(){
        let table = layui.table;
        let layer = layui.layer,
            form = layui.form;

        loadTable("");

        function loadTable(params){
            //表格数据渲染必须函数
            tableLoad = table.render({
                elem: '#userRoleTable'	//表格操作对象
                ,url:'/leek_bbs/stair/roleManage/listRoleRecords'	//数据接口
                //,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,toolbar: '#cellphoneToo'	//自定义表格上面左侧按钮
                , method: 'post'
                , contentType: 'application/json'
                ,defaultToolbar: ['filter', 'exports',]
                ,height:540     //固定表格高度,当每页要显示的条数大于10条时,让它出现下拉框
                ,cellMinWidth:100	//设置列的最小默认宽度,拉伸时最小能缩小的宽度
                , request: {
                    pageName: 'currentPage' //页码的参数名称，默认：page
                    , limitName: 'pageSize' //每页数据量的参数名，默认：limit
                }
                ,where:params
                ,done:function(res,curr,count){
                }
                //,totalRow:true	//开启合并行,进行计算
                ,text:{
                    none:'暂无相关数据'//默认:无数据
                }
                ,page: true
                //,limit:20	//设置每页显示的条数,默认显示为10条
                ,limits:[10,20,30,40]	//每页显示条数选择下拉框
                ,title: '角色数据表'	//数据导出标题
                ,cols: [[
                    {type: 'checkbox', fixed: 'left'}	//复选框,多选
                    ,{field:'id', title:'ID',fixed: 'left',width:'10%', unresize: true, sort: true}//sort:已请求数据排序开启
                    ,{field:'role_name', title:'角色名称',width:'25%'}	//edit:可编辑数据 align:center居中显示
                    ,{field:'role_desc', title:'角色描述',width:'35%'}
                    ,{fixed: 'right', title:'操作',width: '20%', toolbar: '#cellphoneBar'}	//toolbar可使用默认提供按钮,也可自定义按钮
                ]]

            });
        }

        form.on('submit(searchBtn)',function (data) {
            loadTable(data.field);
            return false;
        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            let checkStatus = table.checkStatus(obj.config.id);
            let data = checkStatus.data;    //表格选中的数据
            console.log(obj.config);
            switch(obj.event){
                case 'add':
                    openAddRole();
                    break;
                case 'batchDelete':
                    //layer.msg('选中了：'+ data.length + ' 个');
                    if (data.length > 0){
                        let ids = new Array(data.length);
                        for (let i in data) {
                            let id = data[i].id;
                            ids[i] = id;
                        }
                        ui.confirm('确定删除吗?', function(z){
                            if (z){
                                deleteRole(ids);
                            }
                        });
                    } else {
                        ui.alert("请选择您要删除的数据",1500,false);
                    }

                    break;
                /*case 'isAll':
                  layer.msg(checkStatus.isAll ? '全选': '未全选');
                break;*/

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        //监听单元格编辑事件
        table.on('edit(test)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
            console.log(obj.value); //得到修改后的值
            console.log(obj.field); //当前编辑的字段名
            console.log(obj.data); //所在行的所有相关数据
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            let data = obj.data;
            let ids = [];
            //console.log(obj)
            if(obj.event === 'del'){
                ui.confirm('确定删除这条数据吗', function(z){
                    ids[0] = data.id;
                    if(z){
                        deleteRole(ids);
                    }
                });
            } else if(obj.event === 'edit'){
                openAddRole(data);
            }
        });

        //添加角色窗口方法
        function openAddRole(data) {
           layer.open({
                type:1
                ,title:false
                ,content:`<div id="lay-add-role" style="margin-top: 30px;">
                            <form class="layui-form" style="margin: 5px auto">
                            <div class="layui-form-item" style="margin-top: 30px">
                                <label class="layui-form-label">角色名称</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="role_name" name="role_name" lay-verify="required" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item" style="margin-top: 30px">
                                <label class="layui-form-label">角色描述</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="role_desc2" name="role_desc2" lay-verify="required" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </form>
                        </div>`
                ,area:["34%","40%"]
                ,btn: ['提交', '取消']
                ,yes: function(index, layero){
                    let role_name = $("#role_name").val();
                    let role_desc = $("#role_desc2").val();
                   if(role_name != null && role_name != '' ){
                       if (role_desc != null && role_desc != '' ){
                           if (data != null) {     //修改角色
                               let params = {id:data.id,role_name:role_name,role_desc:role_desc};
                               alterRoleMethod(params);
                           }else {         //添加角色
                               addRoleMethod({role_name:role_name,role_desc:role_desc});
                           }
                       }else{
                           layer.msg("角色描述不能为空",{time:1500,icon:5});
                       }
                   }else {
                       layer.msg("角色名称不能为空",{time:1500,icon:5});
                   }

                }
                ,btn2: function(index, layero){

                },
                success: function(layero, index){
                    if (data != null){      //修改用户角色
                        $("#role_name").val(data.role_name);
                        $("#role_desc2").val(data.role_desc);
                    }
                }
            })
        }



        //增加角色请求方法
        function addRoleMethod(params) {
            axios.post('/leek_bbs/stair/roleManage/insertRoles',params).then(response => {
                let data = response.data;
                if (data.msg == "success"){
                    layer.closeAll();
                    ui.success("添加成功",1500,false);
                    tableLoad.reload();
                } else if (data.code == "500036") {
                    layer.closeAll();
                    ui.alert(data.msg,1500,false);
                } else if (data.code == "500037") {
                    layer.msg(data.msg);
                } else {
                    ui.error(data.msg,1500,false);
                }
            }).catch(error => {
                layer.msg("系统出现了一个未知异常");
            })
        }

        //修改角色请求方法
        function alterRoleMethod(params) {
            axios.post('/leek_bbs/stair/roleManage/alterRoles',params).then(response => {
                let data = response.data;
                if (data.msg == "success"){
                    layer.closeAll();
                    ui.success("修改成功",1500,false);
                    tableLoad.reload();
                } else if (data.code == "500036") {
                    layer.closeAll();
                    ui.alert(data.msg,1500,false);
                } else if (data.code == "500037") {
                    layer.msg(data.msg);
                } else {
                    ui.error(data.msg,1500,false);
                }
            }).catch(error => {
                layer.msg("系统出现了一个未知异常");
            })
        }

        //批量删除数据或删除单行数据
        function deleteRole(ids) {
            axios.post('/leek_bbs/stair/roleManage/deleteRoles',ids).then((res) => {
                let data = res.data;
                if (data.code == "500020"){
                    ui.success("删除成功",1500,false);
                    tableLoad.reload();
                }else if (data.code == "500037") {
                    layer.msg(data.msg);
                }else{
                    ui.alert(data.msg,1500,false);
                }
            }).catch(function (error) {
                ui.alert("请求异常",1500,false);
                console.log(error);
            });

        }


    });




</script>

</body>
</html>